<template>
      <div>
            <div class="container" style="padding-left:0px;padding-right:0px;width:100vw;min-width:1280px;">
                  <pageHead v-bind:systemCd="systemName" v-bind:userinfo="usercd" ref="sysheader" @collectClick="collectClickMth"></pageHead>
                  <div class="content_box">
                        <!-- 左侧菜单栏 -->
                        <div class="left_menu">
                              <div :style="{'float':'right','display':showOrHideOfButton('menu'),'cursor':'pointer'}"><span class="glyphicon glyphicon-menu-left" @click="hideMenu"></span></div>
                              <div class="menu_content">
                                    <menuComponent :isfav="favObj" @search="getSearchForTaskId" @companyOfPage="getCompanyOfPage" ref="menu"></menuComponent>
                              </div>
                        </div>
                        <div :style="{'float':'left','display':showOrHideOfButton('content'),'cursor':'pointer'}"><span class="glyphicon glyphicon-menu-right" @click="showMenu"></span></div>
                        <!-- 右侧内容栏 -->
                        <div class="right_box">
                              <contentComponent :companyValue="company" :param="searchParam" :result="searchResult" @addCollectMth="addCollect" ref="content"></contentComponent>
                        </div>
                  </div>
                  <pageFooter></pageFooter>
            </div>
            <searchCover :killTheadUrl="url.killThreadUrl" ref="syscover"></searchCover>
      </div>
</template>

<script>
import menuComponent from './crossabc/menu.vue';
import contentComponent from './crossabc/content';
import searchCover from '@/components/search_cover.vue';
export default {
      name:'crossabc',
      components:{
            'menuComponent':menuComponent,
            'contentComponent':contentComponent,
            'searchCover':searchCover
      },
      data:function(){
            return {
                  systemName:global.systemCd,
                  usercd:global.userCd,
                  showOrHideMenuFlag:'show',
                  url:{
                        searchTaskidUrl:'/suntorylink/crossabc/CGI/CROSSABC.GET_DATA.CGI',
                        killThreadUrl:'/suntorylink/crossabc/CGI/CROSSABC.KILLPROCESS.CGI',
                        getDataUrl:'/suntorylink/crossabc/CGI/CROSSABC.GET_DATA_CHECK.CGI'
                  },
                  searchParam:undefined,
                  favObj:{
                        prod:false,
                        jan:false,
                        date:{
                              dateA:{flag:false},
                              dateB:{flag:false},
                              dateC:{flag:false}
                        },
                        company:false,
                        customer:false,
                        store:false
                  },
                  company:'',
                  circleChart:'three',
                  searchResult:{}
            };
      },
      computed:{
            showOrHideOfButton(){
                  var vm = this;
                  return function(type){
                        if( vm.showOrHideMenuFlag === 'show' ){
                              return type === 'menu'?'':'none';
                        }else{
                              return type === 'menu'?'none':'';
                        }
                  };
            }
      },
      methods:{
            addCollect(collectionName){
                  var collect = {};
                  collect.param = this.$refs.menu.menuObj;
                  collect.name = collectionName;
                  this.$refs.sysheader.addCollection(collect);
            },
            collectClickMth(param){
                  this.$refs.content.changeCollectName(param.favname);
                  var collectObj = JSON.parse( param.fav );
                  this.favObj.prod = true;
                  this.favObj.jan = true;
                  this.favObj.date.dateA.flag = true;
                  this.favObj.date.dateB.flag = true;
                  this.favObj.date.dateC.flag = true;
                  this.favObj.company = true;
                  this.favObj.customer = true;
                  this.favObj.store = true;
                  //兼容既存收藏
                  if(!collectObj.customerType){
                        collectObj.customerType = 'group';
                  }
                  if(!collectObj.customerProperty){
                        collectObj.customerProperty = {sex:'指定なし',ageStart:'0',ageEnd:'999'};
                  }
                  this.$refs.menu.setMenu(collectObj);
            },
            getSearchForTaskId(param){
                  this.searchResult = {};
                  this.$refs.content.resetTab();
                  if(param.hasOwnProperty('syohin_jan_module')){
                        this.circleChart = param.syohin_jan_module.length === 3 ? 'three' : 'two';
                  }else{
                        this.circleChart = param.syohin_module.length === 3 ? 'three' : 'two';
                  }
                  this.searchParam = param;
                  var vm = this;
                  this.$refs.syscover.coverStart();
                  global.echartsObjArray=[];
                  this.$http.post(this.url.searchTaskidUrl,param).then(function(response){
                        vm.getDataByTaskid(response.data.trim());
                        global.taskId = response.data.trim();
                  });
            },
            getDataByTaskid(sid){
                  var vm = this;
                  this.$http.post(this.url.getDataUrl,{
                        taskid:sid
                  }).then(function(response){
                        var data = response.data;
                        if(data.toString().trim()==='9'){
                              vm.getDataByTaskid(sid);
                        }else if(data.toString().trim()==='2'){//执行时间超过10分钟
                              global.msg_instance.showMsgNew({
                                    title : 'COMMON_011'
                              });
                              window.cancel();
                        }else if(data.toString().trim()==='3'){//取消
                              window.cancel();
                        }else if(data.toString().trim()==='4'){//后端错误：500
                              global.msg_instance.showMsgNew({
                                    title : 'COMMON_012'
                              });
                              window.cancel();
                        }else {
                              try{
                                    vm.searchResult = response.data;
                                    vm.$refs.syscover.coverEnd();
                              }catch(error){
                                    global.msg_instance.showMsgNew({
                                          title : 'COMMON_012'
                                    });
                                    window.cancel();
                              }
                        }
                  });
            },
            getCompanyOfPage(value){
                  this.company = value;
            },
            hideMenu(){
                  this.showOrHideMenuFlag = 'hide';
                  window.$('.left_menu').hide();
                  window.$('.right_box').css('width','calc(100vw - 15px)');
                  for(var i = 0 ;i < window.$('.mainChartClass').length ; i ++){
                        window.$(window.$('.mainChartClass')[i]).css('width','calc(100vw - 60px)');
                  }
                  this.resetChartsSize();
            },
            showMenu(){
                  this.showOrHideMenuFlag = 'show';
                  window.$('.left_menu').show();
                  window.$('.right_box').css('width','calc(100vw - 320px)');
                  for(var i = 0 ;i < window.$('.mainChartClass').length ; i ++){
                        window.$(window.$('.mainChartClass')[i]).css('width','calc(100vw - 380px)');
                  }
                  this.resetChartsSize();
            },
            resetChartsSize(){
                  for(var i in global.echartsObjArray){
                        global.echartsObjArray[i].resize();
                  }
            }
      },
      mounted(){
            //用于存放echarts对象，当页面尺寸发生改变时，用于修改图片尺寸
            global.echartsObjArray=[];
      }
};
</script>
<style scoped>
      .content_box{
            width:100vw;
            height:calc(100vh - 105px);
            min-width: 1280px;
            overflow-y: hidden;
      }
      .left_menu{
            width:310px;
            height: 100%;
            float:left;
            border-right:2px solid #ADADAD;
      }
      .right_box{
            width: calc(100% - 320px);
            min-width: 960px;
            overflow-y: auto;
            height: 100%;
            float:right;
      }
      .menu_content{
            overflow-y: auto;
            overflow-x: hidden;
            height:calc(100% - 10px);
            padding-left:15px;
      }
</style>